<template>
   <div class="tab flex">
   	<router-link tag="div" class="tab-item cell-main center xl" to="/recommend">
   		<span class="tab-link">推荐</span>
   	</router-link>
   	<router-link tag="div" class="tab-item cell-main center xl" to="/singer">
   		<span class="tab-link">歌手</span>
   	</router-link>
   	<router-link tag="div" class="tab-item cell-main center xl" to="/rank">
   		<span class="tab-link">排行</span>
   	</router-link>
   	<router-link tag="div" class="tab-item cell-main center xl" to="/search">
   		<span class="tab-link">搜索</span>
   	</router-link>
   </div>
</template>

<script type="text/ecmascript-6">
export default{
  name:'',
  data(){ return{}},
  components:{}
}
</script>

<style rel="stylesheet" lang="less">
    .tab{
    	line-height: 2rem;
    }
    .tab-link{
    	padding-bottom:  5px;
    	color: rgba(255,255,255,0.5);
	}
	// router active的样式
    .router-link-active{
    	.tab-link{
    		color: #ffcd32;
    		border-bottom: 2px solid;
    	}
    }
</style>
